<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Computer计算属性</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        姓: <input type="text" v-model="firstName"> <br><br>
        名: <input type="text" v-model="lastName"> <br><br>
        全名: <span>{{fullName}}</span>
    </div>
<script>
    Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示

    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三',
        },
        computed: {
            /*fullName: {
                // get 有什么作用? 当有人读取fullName时, get就会被调用, 且返回值就作为fullName的值
                // get 什么时候调用? 1. 初次读取 fullName 时, 2. 所以来的数据发生变化时
                get() {
                    console.log('get被调用了')
                    return this.firstName + '-' + this.lastName
                },
                // set 什么时候调用? 当fullName被修改的时候, 在控制台直接使用vm.fullName = 进行赋值就可以看到此方法被触发
                set(value) {
                    console.log('set', value)
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }*/
            /* 简写: 如果不需要使用set方法那么可以将属性写为方法 html 调用还是fullName 没有() */
            fullName() {
                return this.firstName + '-' + this.lastName
            }
        }
    })
</script>
</body>
</html>
